<template>
  <div class="list-container">
    <div class="search-wrap clearfix">
      <div class="search-wrap-conditions fl">
        <el-input
          v-model="listQuery.condition.key"
          class="input-width"
          placeholder="关键词, 建议内容"
          @keyup.enter.native="resetPage"
        />
      </div>
      <div class="search-wrap-conditions fl marginL10">
        <el-select
          v-model="listQuery.condition.type"
          clearable
          placeholder="请选择反馈类型"
          @change="resetPage"
        >
          <el-option
            v-for="item in conditionType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>

      <div class="search-wrap-conditions fl marginL10">
        <div class="block">
          <el-date-picker
            v-model="timer"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="resetPage"
          />
        </div>
      </div>
      <div class="search-wrap-btn fr">
        <el-button :disabled="loading" type="primary" @click="resetPage">搜索</el-button>
      </div>
    </div>
    <div class="main-wrapper">
      <custom-table :data="listData" :columns="columns">
        <template slot-scope="{ row }">
          <el-button type="text" @click="getDetail(row)">查看详情</el-button>
          <el-button v-if="row.status === 'unprocessed'" type="text" @click="getIgnore(row)">忽略</el-button>
          <span v-else class="marginL20" style="color: #999">已忽略</span>
        </template>
      </custom-table>
      <pagination :total="total" :page="listQuery.pager.page" @pagination="pagination" />
    </div>

    <el-dialog title="建议详情" :visible.sync="dialogVisible" width="50%">
      <div v-if="dialogList">
        <p class="fs-12 text-center marginT10">{{ dialogList.createTime }}</p>
        <div class="dis-flex">
          <el-avatar class="avatar-size marginB10" src="listData.baseInfo.user.avatarUrl" />
          <div class="content-style line-height20">
            <span class="marginL10">{{ dialogList.userName }} {{ dialogList.userId }}</span>
            <el-tag v-if="dialogList.type === 'other'" class="marginL10" size="mini">其他</el-tag>
            <el-tag v-if="dialogList.type === 'defect'" class="marginL10" size="mini">功能缺陷</el-tag>
            <el-tag v-if="dialogList.type === 'wish'" class="marginL10" size="mini">期望功能</el-tag>
            <el-tag v-if="dialogList.type === 'suggest'" class="marginL10" size="mini">操作建议</el-tag>
          </div>
        </div>
        <div class="message-box">
          <p class="marginB10">{{ dialogList.content }}</p>
          <div v-for="(item, index) in dialogList.picArr" :key="index">
            <el-image class="img-style-size" :src="item" />
          </div>
        </div>

        <div v-if="dialogList.replyList && dialogList.replyList.length > 0">
          <div class="h5">系统回复</div>
          <ul class="record marginT10">
            <li v-for="(item, index) in dialogList.replyList" :key="index" class="line-height20">
              <div>
                <span>{{ item.createTime }}</span>
                <span>{{ item.content }}</span>
              </div>
            </li>
          </ul>
        </div>
        <div v-else>
          <div class="h5">系统回复~</div>
          <ul class="record marginT10">
            <li class="line-height20">
              <div>
                <span>暂无系统回复</span>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="marginT20">
        <el-input v-model="textarea" resize="none" type="textarea" :rows="3" placeholder="请输入反馈建议" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveBtn">发送</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CustomTable from '@/components/CustomTable/index';
import Pagination from '@/components/Pagination/index';
import {
  getFeedbackList,
  getFeedbackDetail,
  getFeedbackProcess,
  getFeedbackIgnore
} from '@/api/suggest';
import { conditionType } from './data';
export default {
  name: 'List',
  components: {
    CustomTable,
    Pagination
  },
  data () {
    return {
      textarea: '',
      conditionType: conditionType,
      photo:
        'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      loading: false,
      listQuery: {
        condition: {
          endTime: null,
          key: null,
          startTime: null,
          type: null
        },
        pager: {
          page: 1,
          pageSize: 10
        }
      },
      timer: [],
      dialogVisible: false,
      dialogList: {
        content: ''
      },
      listData: [],
      total: 0,
      columns: [
        { label: '序号', value: 'index', width: '60px', align: 'center' },
        {
          label: '建议内容',
          value: 'content',
          width: '400px',
          align: 'center'
        },
        { label: '类型', value: 'typeTxt', align: 'center' },
        { label: '状态', value: 'statusTxt', align: 'center' },
        { label: '用户', value: 'userName', align: 'center' },
        { label: '时间', value: 'createTime', align: 'center' },
        { label: '操作', value: 'todo', align: 'center', width: '200px' }
      ]
    };
  },
  created () {
    this.init();
  },
  methods: {
    resetPage () {
      this.listQuery.pager.page = 1;
      this.listQuery.pager.pageSize = 10;
      this.init();
    },
    init () {
      this.loading = true;
      this.listQuery.condition.startTime = this.timer && this.timer.length > 0 ? this.timer[0] : null;
      this.listQuery.condition.endTime = this.timer && this.timer.length > 0 ? this.timer[1] : null;
      this.listQuery.condition.key = this.listQuery.condition.key ? this.listQuery.condition.key : null;
      getFeedbackList(this.listQuery)
        .then(res => {
          if (this.checkArr(res.data.records)) {
            res.data.records.map(item => {
              switch (item.status) {
                case 'unprocessed':
                  item.statusTxt = '未处理';
                  break;
                case 'processed':
                  item.statusTxt = '已处理';
                  break;
                case 'ignore':
                  item.statusTxt = '已忽略';
                  break;
              }

              switch (item.type) {
                case 'other':
                  item.typeTxt = '其他';
                  break;
                case 'defect':
                  item.typeTxt = '功能缺陷';
                  break;
                case 'wish':
                  item.typeTxt = '期望功能';
                  break;
                case 'suggest':
                  item.typeTxt = '操作建议';
                  break;
              }
            });
          }

          this.listData = res.data.records;
          this.total = res.data.total;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    resetSearch () {
      this.listQuery = {
        condition: {
          keyword: null
        },
        pager: {
          page: 1,
          pageSize: 10
        }
      };
      this.timer = [];
      this.init();
    },
    pagination ({ page, limit }) {
      this.listQuery.pager.page = page;
      this.listQuery.pager.pageSize = limit;
      this.init();
    },

    saveBtn () {
      getFeedbackProcess({
        feedbackId: this.dialogList.feedbackId,
        content: this.textarea
      })
        .then(res => {
          this.init();
          this.dialogVisible = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },
    getDetail (rows) {
      this.dialogVisible = true;
      this.textarea = '';
      getFeedbackDetail({
        feedbackId: rows.feedbackId
      })
        .then(res => {
          this.dialogList = res.data;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    getIgnore (rows) {
      getFeedbackIgnore({
        feedbackId: rows.feedbackId
      })
        .then(res => {
          this.resetSearch();
        })
        .catch(error => {
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.content-style {
  > span {
    display: block;
  }
}
.img-style-size {
  max-width: 250px;
}

.record {
  border: 1px solid #e2e5ed;
  padding: 15px 20px;
}
</style>
